<template>
	<view class="aboutUs">
		<HeaderBar title="关于我们" showBack fixed backgroundColor="#F6F6F6" />
		<view class="contentBox">
			<view class="app">
				<view class="logo">
					<image src="/static/images/logo.png" class="icon" mode="widthFix"></image>
				</view>
				<view class="name">
					{{name}}
				</view>
				<view class="version">
					当前版本1:{{version}}
				</view>
			</view>


			<view class="cellGrounp">
				<view class="cell" @tap="protocol(1)">
					<view class="title">
						服务协议
					</view>
					<text class="iconfont icon-youjiantou"></text>
				</view>
				<view class="cell" @tap="protocol(2)">
					<view class="title">
						隐私条款
					</view>
					<text class="iconfont icon-youjiantou"></text>
				</view>
			</view>
			<view class="table">
				<view class="title">
					官方渠道
				</view>
				<view class="navList">
					<view class="navBox" @tap="open(item)" v-for="(item,index) in list" :key="index">
						<view class="nav">
							<image :src="item.img" mode="widthFix" class="icon"></image>
							<view class="name">
								{{item.name}}
							</view>
						</view>
					</view>
					<!-- <view class="navBox">
						<view class="nav">
							<image src="/static/images/personal/nav2.png" mode="widthFix" class="icon"></image>
							<view class="name">
								Twitter
							</view>
						</view>
					</view> -->
					<!-- <view class="navBox" @tap="open">
						<view class="nav">
							<image src="/static/images/personal/nav3.png" mode="widthFix" class="icon"></image>
							<view class="name">
								Telegram
							</view>
						</view>
					</view> -->
					<!-- <view class="navBox">
						<view class="nav">
							<image src="/static/images/personal/nav4.png" mode="widthFix" class="icon"></image>
							<view class="name">
								Discord
							</view>
						</view>
					</view> -->
					<!-- <view class="navBox">
						<view class="nav">
							<image src="/static/images/personal/nav5.png" mode="widthFix" class="icon"></image>
							<view class="name">
								论坛
							</view>
						</view>
					</view> -->
					<!-- 	<view class="navBox">
						<view class="nav">
							<image src="/static/images/personal/nav6.png" mode="widthFix" class="icon"></image>
							<view class="name">
								Github
							</view>
						</view>
					</view> -->
					<!-- <view class="navBox" @tap="open">
						<view class="nav">
							<image src="/static/images/personal/nav7.png" mode="widthFix" class="icon"></image>
							<view class="name">
								Email
							</view>
						</view>
					</view> -->

				</view>
			</view>

		</view>
		<uni-popup ref="popup" type="dialog" border-radius="20upx">
			<uni-popup-dialog mode="input" :title="title" :duration="2000" confirmText="复制"
				@confirm="copy(url)">
				<template #default>
					<view class="wrap">
						<view class="url">
							{{url}}
						</view>
					</view>
				</template>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ext_links
	} from '../../http/api.js'
	export default {
		data() {
			return {
				list: [],
				title: "",
				url: "",
				version: "",
				name: "",
			}
		},
		mounted() {
			this.getVersion()
			this.getdata()
		},
		methods: {
			getdata() {
				this.showLoading()
				ext_links().then((res) => {
					if (res.code == 200) {
						this.list = res.data
					}
				}).catch(err => {}).finally(() => {
					this.hideLoading()
				})
			},
			getVersion() {

				plus.runtime.getProperty(plus.runtime.appid, (e) => {
					this.version = e.version;
					this.name = e.name
				});
			},
			open(item) {
				this.title = item.name
				this.url = item.url
				this.$refs.popup.open()
			},
			protocol(type) {
				if (type == 1) {
					uni.navigateTo({
						url: `/pages/protocol/protocol?id=3&title=服务协议`
					})
				} else {
					uni.navigateTo({
						url: `/pages/protocol/protocol?id=4&title=隐私条款`
					})
				}
			},
			copy(address) {
				uni.setClipboardData({
					data: address,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					},
				});
			},
			showLoading() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
			},
			hideLoading() {
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "/static/iconfont/iconfont.css";

	.aboutUs {
		font-weight: 400;
		font-size: 28upx;
		width: 100%;
		height: 100%;
		background: #F6F6F6;

		.wrap {
			display: flex;
			justify-content: center;
			width: 100%;
			box-sizing: border-box;
			.url {
				font-size: 24upx;
				word-break: break-all;
			}

			.copy {
				width: 30upx;
				height: 30upx;
				margin-left: 20upx;
			}
		}

		:deep(.uni-popup-dialog) {
			background-color: #F5F6F8;

			.uni-dialog-title {
				.uni-popup__info {
					color: #3D3D3D;

					.uni-dialog-title-text {
						font-size: 36upx;
						font-weight: 400;
					}

				}
			}
		}

		.contentBox {
			.app {
				text-align: center;
				padding: 80upx 0;

				.logo {
					display: flex;
					justify-content: center;

					.icon {
						width: 118upx;
						height: 118upx;
					}
				}

				.name {
					margin-top: 20upx;
					font-size: 36upx;
					color: #3D3D3D;
				}

				.version {
					color: #A4A4A4;
					font-size: 26upx;
					margin-top: 12upx;
				}
			}

			.cellGrounp {
				background: #FFFFFF;
				margin: 0 36upx;
				border-radius: 20upx;

				>:last-child {
					border-bottom: none !important;
				}

				.cell {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1upx solid #D8D8D8;
					height: 92upx;
					margin-left: 36upx;
					padding-right: 30upx;

					.title {}

					.iconfont {
						color: #A2A2A2;
						font-weight: bold;
					}
				}
			}


			.table {
				margin-top: 48upx;
				padding: 0 36upx;

				.title {
					font-size: 26upx;
				}

				.navList {
					margin-top: 20upx;
					background: #FFFFFF;
					border-radius: 20upx;
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					row-gap: 40upx;
					column-gap: 80upx;
					padding: 40upx 46upx;

					.navBox {

						.nav {
							display: flex;
							flex-direction: column;
							align-items: center;

							.icon {
								width: 86upx;
								height: 86upx;
							}

							.name {
								margin-top: 10upx;
								font-size: 22upx;
								color: #737375;
							}
						}

					}
				}
			}
		}

		:deep(.uni-popup-dialog) {
			background-color: #F5F6F8;

			.uni-dialog-title {
				.uni-popup__info {
					color: #3D3D3D;

					.uni-dialog-title-text {
						font-size: 36upx;
						font-weight: 400;
					}

				}
			}

			.uni-dialog-button-group {
				border-top-color: #D8D8D8;
				border-top-width: 1upx;

				.uni-dialog-button-text {
					color: #368521;
				}

				.uni-border-left {
					border-left-color: #D8D8D8;
					border-left-width: 1upx;

					.uni-button-color {
						color: #D56B6F;
						// font-size: 28upx;
					}
				}
			}

		}
	}
</style>